<template>
	<view>
		<view class="bg-white h100 overflow ">
			<view class="cu-modal bottom-modal" :class="modalName=='loginModal'?'show':''">
				<view class="cu-dialog h100 text-left bg-white">
					<view class="text-xxl">
						<view class="margin cuIcon-close" @tap="closeLogin"></view>
					</view>
					<view class="margin">
						<view class=" text-xxl margin-top-xl margin-lr">{{APP_NAME}}渠道登录</view>

						<view class="cu-form-group margin-top-xl bg-none">
							<input placeholder="手机号/账号/邮箱" name="username" v-model="formData.username"></input>
						</view>
						<view class="cu-form-group">
							<input placeholder="密码" name="password" type="password" v-model="formData.password"></input>
						</view>
						<view class="cu-form-group padding-top-xl">
							<view class="margin-top-xl w100 lg cu-btn  block text-white round shadow-blur" :class="'bg-gradual-'+theme" @tap="login_channel">
								<block v-if="loginLoading">
									<view class="cuIcon-loading2 cuIconfont-spin"></view>登陆中
								</block>
								<block v-else>登陆</block>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		data() {
			return {
				formData: {
					username: '',
					password: '',
					group: 'h5'
				},
				modalName: 'loginModal',
				loginLoading: false,
				APP_NAME: this.$config.APP_NAME,
				theme: this.$config.THEME(),
			};
		},
		onLoad() {},
		onShow() {
			if (this.$common.loginAuth(true)) {}
		},
		computed: mapState(['hasLogin']),
		methods: {
			...mapMutations(['login', 'info', 'channelLogin']),
			closeLogin() {
				this.modalName = ''
				setTimeout((res) => {
					this.navigateBack()
				}, 500)
			},
			login_channel() {
				if (this.loginLoading) return
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.formData.username))) {
					this.$common.showError('请输入正确的手机号')
					return
				}
				if (this.formData.password.length < 6) {
					this.$common.showError('密码最短为 6 个字符')
					return
				}

				this.loginLoading = true
				uni.showLoading({
					title: "登陆中..."
				})
				this.$http
					.post('channel_login', this.formData)
					.then((response) => {
						console.log(response)
						let token = response.data.data
						this.login([token])
						this.channelLogin([])
						this.$common.showSuccess("登录成功", (res) => {
							this.navigateBack()
						})
					})
					.catch((response) => {
						this.loginLoading = false
					})
			},
		}
	}
</script>

<style>
	.full-height {
		height: 100vh;
	}

	.main-box {
		padding: 0 80rpx;
		border-top: 1rpx solid rgba(0, 0, 0, 0.1);
	}

	.main-box .title {
		padding-top: 64rpx;
		font-size: 63rpx;
		color: #000000;
	}

	.main-box .form {
		margin-top: 160rpx;
	}

	.form .view-input {
		margin-bottom: 97rpx;
		padding-bottom: 33rpx;
		border-bottom: 1px solid rgba(238, 238, 238, 1);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.view-input image {
		width: 30rpx;
		height: 37rpx;
		margin-right: 64rpx;
		flex-shrink: 0;
	}

	.form .view-input:last-child {
		margin-bottom: 0;
	}

	.view-input input {
		font-size: 30rpx;
		flex: 1;
	}

	input-holder {
		color: #D4D4D4;
	}

	button {
		width: 100%;
		margin: 140rpx 0rpx 0;
	}

	.tips {
		text-align: center;
		font-size: 22rpx;
		color: #D4D4D4;
		margin-top: 24rpx;
	}
</style>
